<!--  -->
<template>
  <div class="standard-card flex-column justify-between" :class="bgColorClass">
    <div class="header justify-between align-center fz-14 ">
      <div class="date lh-20">
        <slot name="dateName">最近修改:</slot>
        {{ info.updateTime|dateTimeFormatter }}
      </div>
      <div v-if="info.status!==undefined" class="status">
        <slot name="status">
          {{ status2Name(info.status) }}
        </slot>
        <el-switch
          v-model="info.status"
          class="mg-left-4"
          active-color="#fff"
          inactive-color="#fff"
          :active-value="switchValue.activeValue"
          :inactive-value="switchValue.inactiveValue"
          @change="handleSwitchChange"
        />
      </div>
    </div>
    <div class="body justify-center">
      <div>
        <div class="fz-30">{{ info.name }}</div>
        <div v-if="info.subName">{{ info.subName }}</div>
      </div>
    </div>
    <div class="footer fz-14 justify-between align-center card-footer">
      <slot name="footer">
        <div class="desc">{{ info.desc }}</div>
        <div class="button">
          <el-button size="mini" plain @click="handleVisit">
            <slot name="btn-visit "><span class="fz-14">查看</span></slot>
          </el-button>
          <el-button size="mini" plain @click="handleDel">
            <slot name="btn-del "><span class="fz-14">删除</span></slot>
          </el-button>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
const defaultValue = {
  updateTime: '2021-4-22 14:30',
  status: false, // 如果为 undefined则switch组件不显示
  name: '产品名称',
  desc: '说明：x x x x x x x x x x'
}
const defaultSwitchValue = {
  activeValue: true,
  inactiveValue: false
}
const defaultStatus2Name = value => {
  return value ? '已发布' : '未发布'
}
export default {
  name: 'StandardCard',
  components: {},

  props: {
    value: { type: Object, require: true, default: defaultValue },
    switchValue: { type: Object, require: false, default: defaultSwitchValue },
    status2Name: { type: Function, require: false, default: defaultStatus2Name }, // switch前的名字和switch值的转换器
    bgColor: { type: String, require: false, default: 'color0' } // 背景颜色类 color0~color3
  },
  data() {
    return {
      info: {}
    }
  },
  created() {
    this.info = this.value
  },
  watch: {
    switchValue: {
      immediate: true,
      deep: true,
      handler: function(value) {
        this.info = value
      }
    }
  },

  computed: {
    bgColorClass() {
      if (['color0', 'color1', 'color2', 'color3'].includes(this.bgColor)) {
        return this.bgColor
      }
      return 'color0'
    }
  },

  methods: {
    /**
     * 点击查看
     */
    handleVisit() {
      this.$emit('visit', this.info)
    },
    /**
     * 点击删除
     */
    handleDel() {
      this.$confirm('您确定要删除当前数据吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.$emit('del', this.info))
    },
    /**
     * switch 组件状态改变
     */
    handleSwitchChange() {
      this.$emit('switch-change', this.info)
    }
  }
}
</script>
<style lang="scss" scoped>
.standard-card {
  //width: 380px;
  height: vw(230px);
  color: white;
  border-radius: 20px 20px 0 0;

  .header {
    padding: 20px 20px 10px 20px;
  }

  .footer {
    padding: 8px 10px;
    // background: rgba($color: transparent, $alpha: 0.3);
    // background-color: rgba(0, 0, 0, 0.18);
  }
}

.color0 {
  background: linear-gradient(45deg, #ff674a 0%, #ffa897 100%);

  .card-footer {
    background: rgba($color: #d12d1f, $alpha: 0.3);
  }
}

.color1 {
  background: linear-gradient(45deg, #42a4ff 0%, #89c3f8 100%);

  .card-footer {
    background: rgba($color: #0051ac, $alpha: 0.3);
  }
}

.color2 {
  background: linear-gradient(45deg, #6b7cf8 0%, #8693f3 100%);

  .card-footer {
    background: rgba($color: #4729b6, $alpha: 0.3);
  }
}

.color3 {
  background: linear-gradient(45deg, #a764ee 0%, #bc8dee 100%);

  .card-footer {
    background: rgba($color: #8117d2, $alpha: 0.3);
  }
}

.button-set {
  float: right;
}

::v-deep {
  .el-button {
    color: white;
    background-color: transparent;
    border: 1px solid white;
  }

  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    color: white;
    background-color: transparent;
    border: 1px solid white;
  }
}
</style>
